<div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
  <div class="formio-form formio-read-only" ref="webform" novalidate>
    <div id="page1" class="formio-component formio-component-panel formio-component-page1 " ref="component">
      <div class="mb-2 card border">
        <div class="card-header bg-default" role="button" aria-expanded="true" aria-controls="page1-page1" ref="header">
          <span class="mb-0 card-title ">
      Layouts
    </span>
        </div>
        <div class="card-body" ref="nested-page1" id="page1-page1">
          <div id="html" class="formio-component formio-component-htmlelement formio-component-html " ref="component">
            <p class="formio-component-htmlelement " ref="html">Required validation should trigger inside all layout sets</p>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
          <div id="panel1" class="formio-component formio-component-panel formio-component-panel1 " ref="component">
            <div class="mb-2 card border">
              <div class="card-header bg-default" role="button" aria-expanded="true" aria-controls="panel1-panel1" ref="header">
                <span class="mb-0 card-title ">
      Panel
    </span>
              </div>
              <div class="card-body" ref="nested-panel1" id="panel1-panel1">
                <div id="textField" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-textField  required" ref="component">
                  <label ref="label" class="col-form-label  field-required" for="textField-textField" id="l-textField-textField">
                    Text Field - Panel
                  </label>
                  <div ref="element">
                    <input ref="input" name="data[textField]" type="text" class="form-control" lang="en" disabled="disabled" spellcheck="true" value="" id="textField-textField" aria-labelledby="l-textField-textField " aria-required="true"></input>
                  </div>
                  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                </div>
                <div id="number" class="mb-2 formio-form-group has-feedback formio-component formio-component-number formio-component-number  required" ref="component">
                  <label ref="label" class="col-form-label  field-required" for="number-number" id="l-number-number">
                    Number
                    <span class="visually-hidden">, numeric only,</span>
                  </label>
                  <div ref="element">
                    <input ref="input" name="data[number]" type="text" class="form-control" lang="en" disabled="disabled" inputmode="decimal" value="" id="number-number" aria-labelledby="l-number-number " aria-required="true"></input>
                  </div>
                  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                </div>
                <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
                  <div class="col-md-6
    offset-md-0" ref="column-columns">
                    <div id="selectColumn" class="mb-2 formio-form-group has-feedback formio-component formio-component-select formio-component-selectColumn  required" ref="component">
                      <label ref="label" class="col-form-label  field-required" for="selectColumn-selectColumn" id="l-selectColumn-selectColumn">
                        Select - Column
                      </label>
                      <select ref="selectContainer" name="data[selectColumn]" type="text" class="form-control" lang="en" disabled="disabled" id="selectColumn-selectColumn" aria-required="true"></select>
                      <input type="text" class="formio-select-autocomplete-input" ref="autocompleteInput" tabindex="-1" aria-label="autocomplete" />
                      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                    </div>
                  </div>
                  <div class="col-md-6
    offset-md-0" ref="column-columns">
                    <div id="checkboxColumn" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                      <div class="form-check checkbox">
                        <input ref="input" id="checkboxColumn-checkboxColumn" aria-labelledby="l-checkboxColumn-checkboxColumn" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="true">
                        <label class=" field-required form-check-label" for="checkboxColumn-checkboxColumn" id="l-checkboxColumn-checkboxColumn">
                          <span>Checkbox - Column</span>
                        </label>
                      </div>
                      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                    </div>
                  </div>
                  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                </div>
              </div>
            </div>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
          <div id="fi" class="mb-2 formio-form-group formio-component formio-component-fieldset formio-component-fi " ref="component">
            <fieldset>
              <legend ref="header" class="">
                FieldSet
              </legend>
              <div class="fieldset-body" ref="nested-fi">
                <div id="radioFieldSet" class="mb-2 formio-form-group has-feedback formio-component formio-component-radio formio-component-radioFieldSet  required" ref="component">
                  <label ref="label" class="col-form-label  field-required" for="radioFieldSet-radioFieldSet" id="l-radioFieldSet-radioFieldSet">
                    Radio - Field Set
                  </label>
                  <div class="form-radio radio" ref="radioGroup" role="radiogroup" aria-required="true" aria-labelledby="l-radioFieldSet-radioFieldSet">
                    <div class="radio  form-check" ref="wrapper">
                      <input ref="input" name="data[radioFieldSet][-radioFieldSet]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="a" id="-radioFieldSet--a" role="radio">
                      <label class="form-check-label label-position-right" for="-radioFieldSet--a"><span>a</span></label>
                    </div>
                    <div class="radio  form-check" ref="wrapper">
                      <input ref="input" name="data[radioFieldSet][-radioFieldSet]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="b" id="-radioFieldSet--b" role="radio">
                      <label class="form-check-label label-position-right" for="-radioFieldSet--b"><span>b</span></label>
                    </div>
                    <div class="radio  form-check" ref="wrapper">
                      <input ref="input" name="data[radioFieldSet][-radioFieldSet]" type="radio" class="form-check-input" lang="en" disabled="disabled" value="c" id="-radioFieldSet--c" role="radio">
                      <label class="form-check-label label-position-right" for="-radioFieldSet--c"><span>c</span></label>
                    </div>
                  </div>
                  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                </div>
                <div id="phoneNumberFieldset" class="mb-2 formio-form-group has-feedback formio-component formio-component-phoneNumber formio-component-phoneNumberFieldset  required" ref="component">
                  <label ref="label" class="col-form-label  field-required" for="phoneNumberFieldset-phoneNumberFieldset" id="l-phoneNumberFieldset-phoneNumberFieldset">
                    Phone Number - Fieldset
                    <span class="visually-hidden">, numeric only,</span>
                  </label>
                  <div ref="element">
                    <input ref="input" name="data[phoneNumberFieldset]" type="text" class="form-control" lang="en" inputmode="decimal" disabled="disabled" spellcheck="true" value="" id="phoneNumberFieldset-phoneNumberFieldset" aria-labelledby="l-phoneNumberFieldset-phoneNumberFieldset " aria-required="true"></input>
                  </div>
                  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                </div>
                <div id="table" class="table-responsive formio-component formio-component-table formio-component-table  no-top-border-table" ref="component">
                  <table class="table
  ">
                    <caption class="visually-hidden">Table</caption>
                    <tbody>
                      <tr ref="row-table">
                        <td scope="col" ref="table-table-0" class="cell-align-left">
                          <div id="dateTime" class="mb-2 formio-form-group has-feedback formio-component formio-component-datetime formio-component-dateTime  required" ref="component">
                            <label ref="label" class="col-form-label  field-required" for="dateTime-dateTime" id="l-dateTime-dateTime">
                              Date / Time
                            </label>
                            <div ref="element">
                              <div class="input-group">
                                <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" disabled="disabled" value="" id="dateTime-dateTime" aria-labelledby="l-dateTime-dateTime " aria-required="true"></input>
                                <span aria-live="assertive" id="dateTime-liveRegion" class="visually-hidden" ref="liveRegion"></span>
                                <div class="input-group-text" ref="suffix">
                                  <i ref="icon" class="fa fa-calendar bi bi-calendar" style=""></i>
                                </div>
                              </div>
                            </div>
                            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                          </div>
                        </td>
                        <td scope="col" ref="table-table-0" class="cell-align-left">
                          <div id="dayTable" class="mb-2 formio-form-group has-feedback formio-component formio-component-day formio-component-dayTable " ref="component">
                            <label ref="label" class="col-form-label " for="dayTable-dayTable" id="l-dayTable-dayTable">
                              Day - Table
                            </label>
                            <div class="row" role="group" aria-labelledby="l-dayTable-dayTable">
                              <div class="col col-xs-4">
                                <label for="dayTable-month" class="field-required">Month</label>
                                <div><select ref="month" id="dayTable-month" class="form-control" name="month" lang="en" aria-required="true">
                                    <option value=''>
                                    </option>
                                    <option value='1'>
                                      January
                                    </option>
                                    <option value='2'>
                                      February
                                    </option>
                                    <option value='3'>
                                      March
                                    </option>
                                    <option value='4'>
                                      April
                                    </option>
                                    <option value='5'>
                                      May
                                    </option>
                                    <option value='6'>
                                      June
                                    </option>
                                    <option value='7'>
                                      July
                                    </option>
                                    <option value='8'>
                                      August
                                    </option>
                                    <option value='9'>
                                      September
                                    </option>
                                    <option value='10'>
                                      October
                                    </option>
                                    <option value='11'>
                                      November
                                    </option>
                                    <option value='12'>
                                      December
                                    </option>
                                  </select>
                                  <input type="text" class="formio-select-autocomplete-input" ref="autocompleteInput" tabindex="-1" aria-label="autocomplete" />
                                </div>
                              </div>
                              <div class="col col-xs-3">
                                <label for="dayTable-day" class="field-required">Day</label>
                                <div>
                                  <input ref="day" id="dayTable-day" class="form-control formio-day-component-day" type="number" placeholder="" step="1" min="1" max="31" id="dayTable-dayTable" aria-labelledby="l-dayTable-dayTable " aria-required="true"></input>
                                </div>
                              </div>
                              <div class="col col-xs-5">
                                <label for="dayTable-year" class="field-required">Year</label>
                                <div>
                                  <input ref="year" id="dayTable-year" class="form-control formio-day-component-year" type="number" placeholder="" step="1" min="1900" max="2030" id="dayTable-dayTable" aria-labelledby="l-dayTable-dayTable " aria-required="true"></input>
                                </div>
                              </div>
                            </div>
                            <input name="ctx.data[day]" type="hidden" class="form-control" lang="en" value="" ref="input">
                            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                          </div>
                        </td>
                      </tr>
                      <tr ref="row-table">
                        <td scope="col" ref="table-table-1" class="cell-align-left">
                          <div id="currencyTable" class="mb-2 formio-form-group has-feedback formio-component formio-component-currency formio-component-currencyTable  required" ref="component">
                            <label ref="label" class="col-form-label  field-required" for="currencyTable-currencyTable" id="l-currencyTable-currencyTable">
                              Currency - Table
                              <span class="visually-hidden">, numeric only,</span>
                            </label>
                            <div ref="element">
                              <input ref="input" name="data[currencyTable]" type="text" class="form-control" lang="en" disabled="disabled" inputmode="decimal" value="" id="currencyTable-currencyTable" aria-labelledby="l-currencyTable-currencyTable " aria-required="true"></input>
                            </div>
                            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                          </div>
                        </td>
                        <td scope="col" ref="table-table-1" class="cell-align-left">
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                </div>
              </div>
            </fieldset>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
          <div id="well1" class="" ref="component">
            <div class="card card-body bg-light mb-3">
              <div ref="nested-well1">
                <div id="emailWell" class="mb-2 formio-form-group has-feedback formio-component formio-component-email formio-component-emailWell  required" ref="component">
                  <label ref="label" class="col-form-label  field-required" for="emailWell-emailWell" id="l-emailWell-emailWell">
                    Email - Well
                  </label>
                  <div ref="element">
                    <input ref="input" name="data[emailWell]" type="email" class="form-control" lang="en" disabled="disabled" spellcheck="true" value="" id="emailWell-emailWell" aria-labelledby="l-emailWell-emailWell " aria-required="true"></input>
                  </div>
                  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                </div>
                <div id="addressWell" class="mb-2 formio-form-group has-feedback formio-component formio-component-address formio-component-addressWell  required" ref="component">
                  <label ref="label" class="col-form-label  field-required" for="addressWell-addressWell" id="l-addressWell-addressWell">
                    Address - Well
                  </label>
                  <div class="address-autocomplete-container">
                    <input ref="searchInput" name="data[addressWell]" type="text" class="form-control" lang="en" tabindex="0" disabled="disabled" value="" autocomplete="off" aria-label="autocomplete">
                    <i class="address-autocomplete-remove-value-icon fa fa-times bi bi-x" tabindex="0" ref="removeValueIcon"></i>
                  </div>
                  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                </div>
              </div>
            </div>
            <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
          </div>
        </div>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
    <div id="submit" class="mb-2 formio-form-group has-feedback formio-component formio-component-button formio-component-submit  mb-2 formio-form-group" ref="component">
      <button ref="button" name="data[submit]" type="submit" class="btn btn-primary btn-md" lang="en" disabled="disabled">
        Submit
      </button>
      <div ref="buttonMessageContainer">
        <span class="help-block" ref="buttonMessage"></span>
      </div>
      <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
    </div>
  </div>
  <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
</div>